<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="../assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="../assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="../assets/css/style.min.css">

</head>

<body style="font-family: 'Britannic Bold'">
    <div id="app">
        <!-- Header Section Start -->
        <div class="header section">

            <!-- Header Bottom Start -->
            <div class="header-bottom">
                <div class="header-sticky">
                    <div class="container">
                        <div class="row align-items-center position-relative">

                            <!-- Header Logo Start -->
                            <div class="col-lg-3 col-md-4 col-6">
                                <div class="header-logo">
                                    <a href="index.html"><img src="../assets/images/logo/logo.png" alt="Site Logo" /></a>
                                </div>
                            </div>
                            <!-- Header Logo End -->

                            <!-- Header Menu Start -->
                            <div class="col-lg-6 d-none d-lg-block">
                                <div class="main-menu">
                                    <ul>
                                        <li><a href="index.html">首页</a></li>
                                        <li><a href="shop.html">商品列表</a></li>
                                        <li><a href="cart.html">购物车</a></li>
                                        <li><a href="about.html">关于</a></li>
                                        <li><a href="../login.html">退出登录</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Header Menu End -->

                            <!-- Header Action Start -->
                            <div class="col-lg-3 col-md-8 col-6">
                                <div class="header-actions">

                                    <!-- Header Action Search Button Start -->
                                    <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                        <div class="action-execute">
                                            <a class="action-search-open" href="javascript:void(0)"><i
                                                    class="icon-magnifier icons"></i></a>
                                            <a class="action-search-close" href="javascript:void(0)"><i
                                                    class="ti-close"></i></a>
                                        </div>
                                        <!-- Search Form and Button Start -->
                                        <form class="header-search-form" action="#">
                                            <input type="text" class="header-search-input"
                                                placeholder="Search Our Store">
                                            <button class="header-search-button"><i
                                                    class="icon-magnifier icons"></i></button>
                                        </form>
                                        <!-- Search Form and Button End -->
                                    </div>
                                    <!-- Header Action Search Button End -->

                                    <!-- Header My Account Button Start -->
                                    <a href="my-account.html" class="header-action-btn header-action-btn-wishlist">
                                        <i class="icon-user icons"></i>
                                    </a>
                                    <!-- Header My Account Button End -->

                                    <!-- Header Action Button Start -->
                                    <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                        <a class="cart-visible" href="javascript:void(0)"
                                            @click="()=>{$('.header-cart-content').slideToggle('slow');}">
                                            <i class="icon-handbag icons"></i>
                                            <span class="header-action-num">{{cartNum}}</span>
                                        </a>

                                        <!-- Header Cart Content Start -->
                                        <div class="header-cart-content" id="carts">

                                            <!-- Cart Procut Wrapper Start  -->
                                            <div class="cart-product-wrapper">

                                                <!-- Cart Product/Price Start -->
                                                <div class="cart-product-inner p-b-20 m-b-20 border-bottom"
                                                    v-for="(item,index) in cartList" :key="index">

                                                    <!-- Single Cart Product Start -->
                                                    <div class="single-cart-product">
                                                        <div class="cart-product-thumb">
                                                            <a href="#"><img :src="item.images" alt="Cart Product"></a>
                                                        </div>
                                                        <div class="cart-product-content">
                                                            <h3 class="title"><a href="#">{{item.shopName}}</a></h3>
                                                            <div class="product-quty-price">
                                                                <span class="cart-quantity">数量: <strong> {{item.number}}
                                                                    </strong></span>
                                                                <span class="price">
                                                                    <span class="new">￥{{item.money}}</span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Single Cart Product End -->

                                                    <!-- Product Remove Start -->
                                                    <div class="cart-product-remove">
                                                        <a href="#/" @click="delCart(item.id)"><i
                                                                class="icon-close"></i></a>
                                                    </div>
                                                    <!-- Product Remove End -->

                                                </div>
                                                <!-- Cart Product/Price End -->

                                            </div>
                                            <!-- Cart Procut Wrapper -->

                                            <!-- Cart Product Total Start -->
                                            <div class="cart-product-total p-b-20 m-b-20 border-bottom">
                                                <span class="value">总价</span>
                                                <span class="price">￥{{countMoney}}</span>
                                            </div>
                                            <!-- Cart Product Total End -->

                                            <!-- Cart Product Button Start -->
                                            <div class="cart-product-btn m-t-20">
                                                <a href="cart.html"
                                                    class="btn btn-outline-light btn-hover-primary w-100">查看购物车</a>
                                                <a href="#" class="btn btn-outline-light btn-hover-primary w-100 m-t-20"
                                                    @click="buyAll">全部下单</a>
                                            </div>
                                            <!-- Cart Product Button End -->

                                        </div>
                                        <!-- Header Cart Content End -->

                                    </div>
                                    <div class="header-action-btn header-action-btn-cart d-flex d-sm-none">
                                        <a href="#">
                                            <i class="icon-handbag icons"></i>
                                            <span class="header-action-num">3</span>
                                        </a>
                                    </div>
                                    <!-- Header Action Button End -->

                                    <!-- Mobile Menu Hambarger Action Button Start -->
                                    <a href="javascript:void(0)"
                                        class="header-action-btn header-action-btn-menu d-lg-none d-md-flex">
                                        <i class="icon-menu"></i>
                                    </a>
                                    <!-- Mobile Menu Hambarger Action Button End -->

                                </div>
                            </div>
                            <!-- Header Action End -->

                        </div>
                    </div>
                </div>
            </div>
            <!-- Header Bottom End -->

        </div>
        <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">关于我们</h2>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li>关于我们</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- About Section Start -->
    <div class="section section-margin" style="height: 600px;">
        <div class="container">
            <div class="row m-b-n30">
                <div class="col-md-6 pe-lg-5 p-r-15 m-b-30" data-aos="fade-up" data-aos-duration="1000">
                    <!-- About Thumb Start -->
                    <div class="about-thumb">
                        <img class="fit-image" src="../assets/images/about/1.png" alt="About Image">
                    </div>
                    <!-- About Thumb End -->
                </div>
                <div class="col-md-6 align-self-center m-b-30" data-aos="fade-up" data-aos-duration="1500">
                    <!-- About Content Start -->
                    <div class="about-content">
                        <h2 class="title">关于我们</h2>
                        <p>主要是以经营宠物用品为主的派多格宠物店, 宠物用品主要包含： 狗粮、猫粮、狗窝、狗衣服、狗垫子、狗的营养品，狗的调理肠胃品、狗的美毛品、狗的药品，包括补钙的、驱虫的、治疗皮肤病的，等等。</p>
                        <ul class="about-content-list">
                            <li><span><i class="ti-angle-double-right"></i></span> 通讯便捷</li>
                            <li><span><i class="ti-angle-double-right"></i></span> 商品优惠</li>
                            <li><span><i class="ti-angle-double-right"></i></span> 在线客服</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-hover-dark">联系我们</a>
                    </div>
                    <!-- About Content End -->
                </div>
            </div>
        </div>
    </div>
    <!-- About Section End -->

    <!-- Testimonial Section Start -->
    <div class="section bg-name-bright section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!-- Testimonial Carousel Start -->
                    <div class="testimonial-carousel">

                        <!-- Testimonial Gallery Top Start -->
                        <div class="swiper-container testimonial-gallery-top" data-aos="fade-up" data-aos-duration="1000">
                            <div class="swiper-wrapper">

                                <!-- Single Swiper Slide Start -->
                                <div class="swiper-slide">

                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>本店商品均属正品，假一罚十信誉保证。欢迎广大顾客前来放心选购，我们将竭诚为您服务! 本店专门营销什么什么商品，假一罚十信誉保证。本店的服务宗旨是用心服务，以诚待人! </p>
                                    </div>
                                    <!-- Testimonial Content End -->

                                </div>
                                <!-- Single Swiper Slide End -->

                                <!-- Single Swiper Slide Start -->
                                <div class="swiper-slide">

                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>Vivamus a lobortis ipsum, vel condimentum magna. Etiam id turpis tortor. Nunc scelerisque, nisi a blandit varius, nunc purus venenatis ligula, sed venenatis orci augue nec sapien. Cum sociis natoque</p>
                                    </div>
                                    <!-- Testimonial Content End -->

                                </div>
                                <!-- Single Swiper Slide End -->
                            </div>

                        </div>
                        <!-- Testimonial Gallery Top End -->

                    </div>
                    <!-- Testimonial Carousel End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-name-light p-t-20 p-b-20">
            <div class="container">
                <div class="row align-items-center m-b-n20">
                    <div class="col-md-6 text-center text-md-start order-2 order-md-1 m-b-20">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2022.XXX.</p>
                        </div>
                    </div>
                    <div class="col-md-6 text-center text-md-end order-1 order-md-2 m-b-20">
                        <div class="payment">
                            <a href="#/">
                                <img class="fit-image" src="../assets/images/payment/payment_large.png" alt="Payment">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->
</div>
    <script src="../assets/js/vendor.min.js"></script>
    <script src="../assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="../assets/js/main.js"></script>
    <script src="assets/js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    page: 1,
                    size:9999999,
                    userId: '',
                    userName: '',
                    role: '',
                    selectList: [],
                    cartList: [],
                    shopName: '',
                    cartNum: 0,
                    countMoney: 0,
                }
            },
            mounted() {
                var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
                if (userInfo == "" || userInfo == null) {
                    alert("您还没有登录，请先登录后在进行操作！");
                    window.location.href = '../login.html'
                };
                this.userName = userInfo.account
                this.role = userInfo.role
                this.userId = userInfo.id
                this.getCartList()
            },
            methods: {
                getCartList() {
                    const that = this
                    that.countMoney = 0
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        url: "/orderList/list",
                        contentType: 'application/json',
                        data: JSON.stringify({
                            "size": that.size,
                            "page": that.page,
                            "shopState": '0',
                            "bugId": that.userId
                        }),
                        success: function (data) {
                            data.data.list.forEach((item) => {
                                that.countMoney += item.money
                                if(item.shopState === '1'){
                                    item.shopState = '已下单'
                                }else if(item.shopState === '2'){
                                    item.shopState = '已发货'
                                }
                            })
                            that.cartList = data.data.list
                            that.cartNum = data.data.total
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                },
                buyAll() {
                    const that = this
                    if (confirm("确定要全部下单吗?")) {
                        that.cartList.forEach((item) => {
                            $.ajax({
                                //几个参数需要注意一下
                                type: "POST", //方法类型
                                dataType: "json", //预期服务器返回的数据类型
                                contentType: 'application/json',
                                url: "/orderList/edit",
                                data: JSON.stringify({
                                    id: item.id,
                                    shopState: '1'
                                }),
                                success: function (data) {
                                    that.getCartList()
                                },
                                error: function () {
                                    alert("异常！");
                                }
                            });
                        })
                    }
                },
                delCart(id) {
                    const that = this
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        contentType: 'application/json',
                        url: "/orderList/deleteById",
                        data: JSON.stringify({
                            id: id
                        }),
                        success: function (data) {
                            that.getCartList()
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                },
            }
        })
    </script>
</body>

</html>
